<template>
  <div class="s-box">
    <group class="form-content" title="添加还贷计划" label-width="4.5em" label-margin-right="1em" label-align="left">
      <x-input title="还贷平台" v-model="loanPlan.platformName" required></x-input>
      <x-input title="还贷金额" v-model="loanPlan.amount" required></x-input>
      <x-input title="还贷利息" v-model="loanPlan.interest" required></x-input>
      <x-input title="还贷期数" v-model="loanPlan.stageCount" required></x-input>
      <datetime
        format="YYYY-MM"
        v-model="loanPlan.startMonth"
        title="开始年月"
        @on-confirm="onConfirm"></datetime>
      <datetime
        format="H"
        v-model="loanPlan.repayDay"
        :display-format="formatDateFunction"
        title="还款日"
        @on-confirm="onConfirm"
        :min-hour=1 :max-hour=28
      ></datetime>
    </group>
    <group>
      <group-title slot="title">备注</group-title>
      <x-textarea placeholder="请填写备注" :show-counter="false" :rows="3" :autosize="true"
                  v-model="loanPlan.remark||''"></x-textarea>
    </group>
    <box gap="10px 10px">
      <x-button type="primary" :show-loading="loading" @click.native="submit">提交还贷计划</x-button>
    </box>
  </div>
</template>

<script>
  import {
    Group,
    GroupTitle,
    XInput,
    XTextarea,
    Box,
    XButton,
    Toast,
    Checker,
    CheckerItem,
    Divider,
    Datetime
  } from 'vux'

  export default {
    components: {
      GroupTitle,
      Group,
      XInput,
      XTextarea,
      Box,
      XButton,
      Checker,
      CheckerItem,
      Divider,
      Datetime
    },
    data() {
      return {
        loanPlan: {
          platformName: '',
          amount: '',
          interest: '',
          stageCount: '',
          startMonth: this.moment().format('YYYY-MM'),
          repayDay: '10',
        },
        loading: false,
      }
    },
    mounted() {
      if (JSON.parse(sessionStorage.getItem('loanPlan'))) {
        this.loanPlan = JSON.parse(sessionStorage.getItem('loanPlan'));
      }
    },

    methods: {
      formatDateFunction(val) {
        return "每月" + val + "日还款";
      },
      onConfirm(val) {

      },
      submit() {
        for (let key in this.loanPlan) {
          if (!this.loanPlan[key]) {
            this.$vux.toast.show({
              type: 'text',
              text: '除备注外不能为空',
              width: 'auto'
            });
            return;
          }
        }
        sessionStorage.setItem('loanPlan', JSON.stringify(this.loanPlan));
        this.$router.push('calLoanPlan');
      }
    }
  }
</script>

<style lang="less" scoped>

  .my-content {
    padding: 10px 15px 0;
    font-size: .4rem;
  }

  .popover-demo-content {
    padding: 5px 10px;
  }

  .sale-all {
    /*display: inline-block;*/
    /*border: 1px solid #ec1c24;*/
    /*border-radius: 5px;*/
    padding: 10px 15px;
    position: relative;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    div {
      font-size: .35rem;
      margin-right: .3rem;
    }
    &:before {
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 1px;
      border-top: 1px solid #D9D9D9;
      color: #D9D9D9;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      left: 15px;
    }
  }

  .demo5-item {
    width: 100px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-right: 6px;
    flex: 1;
  }

  .demo5-item-selected {
    background: #ffffff;
    border-color: #ff4a00;
  }

</style>
